<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{pathName[0]}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{pathName[1]}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                menulist: [],
                routePath: '',
                pathName: []
            }
        },
        props: ['activePath'],
        watch: {
            activePath: function(path) {
                console.log(path)
                this.routePath = path
                this.checkMenuList(this.menulist)
            }
        },
        created() {
            this.routePath = this.$route.path
            this.getMenuList()
        },
        methods: {
            checkMenuList(arr) {
                arr.forEach(key => {
                    key.children.forEach(val => {
                        if ('/' + val.path == this.routePath) {
                            this.pathName = []
                            this.pathName.push(key.authName)
                            this.pathName.push(val.authName)
                            return this.pathName
                        } else if (this.routePath == `/${val.path}/add`) {
                            this.pathName = []
                            this.pathName.push(key.authName)
                            this.pathName.push('添加商品')
                        }
                    })
                })
            },

            async getMenuList() {
                const { data: res } = await this.$http.get('menus')
                this.menulist = res.data
                this.checkMenuList(this.menulist)
            }
        }
    }
</script>

<style lang="less" scoped>

</style>
